import React, {useEffect, useState} from 'react';
import {Image, ScrollView, StyleSheet, Switch, Text, TextInput, View} from 'react-native';
import {useNavigation, useRoute} from '@react-navigation/native';
import screen from '../../utils/screen';
import Images from '../../images/images';
import LinkButton from '../../components/linkButton';
import AppStore from '../../store/useAppStore';
import Container from '../../components/Container';
import TouchableView from '../../components/touchableView';
import {useDialog} from '../../components/dialog/useDialog';
import {isValidPhoneNumber} from '../../utils/common';
import {useToast} from '../../components/toast/useToast';

const ContactEdit = ()=>{
    const navigation = useNavigation()
    const route = useRoute()
    const dialog = useDialog()
    const toast = useToast()
    const [name,setName] = useState('')
    const [phone,setPhone] = useState('')
    const [urgent,setUrgent] = useState(false)
    const {deviceList} = AppStore
    const {data} = route.params

    useEffect(()=>{

        if(data){
            setUrgent(data.urgent)
            setName(data.name)
            setPhone(data.phone)
            navigation.setOptions({
                headerRight:()=>{
                    return (
                        <TouchableView
                            style={{paddingHorizontal: screen.PIXEL_20}}
                            onPress={deleteContact}
                        >
                            <Image source={Images.delete}
                                   resizeMode={'contain'}
                                   style={{width:screen.PIXEL_30,height:screen.PIXEL_30}}
                            />
                        </TouchableView>
                    )
                }
            })
        }

    },[])

    const deleteContact = ()=>{
        dialog.alert({
            title:'删除联系人？',
            button: [
                {
                    text: '确定',
                    onPress: () => {
                        let obj = {...data,delete:true}
                        route.params.callback(obj)
                        navigation.goBack()
                    },
                    pressHide: true,
                    tag: 'confirm',
                    onClose: false
                },
                {
                    text: '取消',
                    onPress: () => {

                    },
                    pressHide: true,
                    tag: 'cancel',
                    onClose: false
                },
            ]
        })

    }

    const saveContact = ()=>{

        if(!name){
            toast.show('请输入姓名')
            return
        }
        if(!phone){
            toast.show('请输入手机号')
            return
        }
        if(!isValidPhoneNumber(phone)){
            toast.show('手机号码不正确，请重新输入')
            return
        }


        route.params.callback({
            ...data,
            name:name.trim(),
            phone:phone.trim(),
            urgent
        })

        navigation.goBack()

    }

    return (
        <Container>
            <ScrollView
                contentContainerStyle={{paddingHorizontal:screen.PIXEL_30,alignItems:'center',paddingTop:screen.PIXEL_40}}
            >

                <TextInput value={name} onChangeText={setName} placeholder={'姓名'} maxLength={10} style={styles.input}/>

                <TextInput value={phone} onChangeText={setPhone} placeholder={'手机号码'} maxLength={11} keyboardType={'numeric'} style={styles.input}/>

                <View style={styles.urgentWrap}>
                    <Text style={{color:'#333',fontSize:14}}>紧急联系人</Text>
                    <Switch
                        onValueChange={setUrgent} value={urgent}
                        trackColor={{false:'#767577',true:'#0D80FC'}}
                    />
                </View>

            </ScrollView>
            <LinkButton
                style={{marginBottom:screen.PIXEL_120,alignSelf:'center'}}
                title={'保存'}
                onPress={saveContact}
            />
        </Container>
    )
}
export default ContactEdit
const styles = StyleSheet.create({
    container:{
        flex: 1
    },
    input:{
        width:'100%',height:screen.PIXEL_88,backgroundColor:'#fff',borderRadius:screen.PIXEL_20,
        paddingHorizontal:screen.PIXEL_20,marginBottom:screen.PIXEL_30
    },
    urgentWrap:{
        width:'100%',flexDirection:'row',justifyContent:'space-between',alignItems:'center',
        paddingLeft:screen.PIXEL_20
    }
})
